<div id="app" v-cloak>
    <div class="flex-row flex-content-start flex-item-center">
        <el-form ref="seach_form" v-show="openSeach" :inline="true" class="flex-row flex-wrap">

            <el-form-item v-for="(item,key) in seachObj" :label="item.title">
                <el-input v-if="item.seachType==`input`" v-model="item.value" :placeholder="`请输入`+item.title"></el-input>
                <el-date-picker
                        class="date-picker-class"
                        v-if="item.seachType==`datetimerange`"
                        v-model="item.value"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        value-format="YYYY-MM-DD HH:mm:ss"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSeach" color="#626aef">搜索</el-button>
                <el-button type="danger" @click="handleReset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="flex-row seach-class">
        <div>
            <el-button type="danger" @click="handleDeleteAll">批量删除</el-button>
        </div>
        <div>
            <el-button type="plain" @click="handleRefresh">
                <el-icon>
                    <Refresh/>
                </el-icon>
            </el-button>
        </div>
        <div v-if="seachShow">
            <el-switch
                    v-model="openSeach"
                    class="ml-2"
                    active-text="搜索"
                    inactive-text="隐藏"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                    @change="changeSeach"
            />
        </div>

    </div>
    <el-scrollbar>
        <el-table :data="dataObj.rows" style="width: 100%;"
                  :show-overflow-tooltip="true"
                  :height="500"
                  @selection-change="$event=>handleSelectionChange($event,pk?pk:`id`)"
        >
            <el-table-column type="selection" :selectable="selectable" width="55"></el-table-column>
            <el-table-column prop="id" label="ID" width="180">
            </el-table-column>
            <el-table-column prop="username" label="用户名">
            </el-table-column>
            <el-table-column prop="title" label="标题">
            </el-table-column>
            <el-table-column prop="url" label="Url">
            </el-table-column>
            <el-table-column prop="ip" label="IP">
            </el-table-column>
            <el-table-column prop="" label="创建时间">
                <template #default="scope">
                    {{getDate(scope.row.createtime)}}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180" fixed="right">
                <template #default="scope">
                    <el-button v-if="select!=1" type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-scrollbar>
    <div class="" style="margin-top: 20px">
        <el-pagination
                :hide-on-single-page="1"
                :current-page="dataObj.page"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="dataObj.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dataObj.total"
                prev-text="上一页"
                next-text="下一页"
                :background="true"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        ></el-pagination>
    </div>
</div>
<style>
    .demo-image__error .image-slot {
        font-size: 30px;
    }

    .demo-image__error .image-slot .el-icon {
        font-size: 30px;
    }

    .demo-image__error .el-image {
        width: 100%;
        height: 200px;
    }
</style>